第19章 表单脚本

• acceptCharset：服务器可以接收的字符集
• action：请求的 URL
• elements：表单中所有控件的 HTMLCollection
• enctype：请求的编码类型
• length：表单中控件的数量
• method：HTTP 请求的方法类型，通常是"get"或"post"
• name：表单的名字
• reset()：把表单字段重置为各自的默认值
• submit()：提交表单
• target：用于发送请求和接收响应的窗口的名字

表单是通过用户点击提交按钮或图片按钮的方式提交的。提交按钮可以使用 type 属性为 "submit" 的或元素来定义，图片按钮可以使用 type 属性为 "image" 的元素来定义。

<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">
<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>
<!-- 图片按钮 -->
<input type="image" src="graphic.gif">

表单在向服务器发送请求之前会触发 submit 事件，可以通过该事件取消表单：

let form = document.getElementById("myForm");
form.addEventListener("submit", (event) => { 
  // 阻止表单提交
  event.preventDefault();
});

可以通过编程方式调用 submit() 方法提交表单数据，通过 submit()提交表单时，submit 事件不会触发：

let form = document.getElementById("myForm");
// 提交表单 
form.submit();

用户单击重置按钮可以重置表单，重置按钮可以使用 type 属性为"reset"的或

元素来创建。与提交表单一样，用户点击重置按钮时会触发 reset 事件，可以通过该事件取消重置。也可通过编程方式调用 reset() 方法完成重置操作，与 submit() 方法不同的是，调用 reset() 方法时会触发 reset 事件。

表单中的元素可以使用原生 DOM 方法来访问，所有表单元素都是表单 elements 属性中的一个值，可以通过索引或者 name 属性来访问。

let form = document.getElementById("form1");
// 取得表单中的第一个字段
let field1 = form.elements[0];
// 取得表单中名为"textbox1"的字段
let field2 = form.elements["textbox1"];
// 取得字段的数量
let fieldCount = form.elements.length;

常见的用法是取得某个表单元素对其进行属性修改或方法调用。例如禁止用户重复点击提交按钮，可以通过监听 submit 事件并修改提交按钮属性来实现：

// 避免多次提交表单的代码
let form = document.getElementById("myForm");
form.addEventListener("submit", (event) => {
  let target = event.target;
  // 取得提交按钮
  let btn = target.elements["submit-btn"];
  // 禁用提交按钮
  btn.disabled = true;
});

如果表单字段中有 required 属性，则该字段为必填字段

<input type="text" name="username" required>

HTML5 为文本字段新增了 pattern 属性，用于指定一个正则表达式，用户输入的文本必须与之匹配

<input type="text" pattern="\d+" name="count">

使用 checkValidity() 方法可以检测表单中任意给定字段是否有效，如果字段值有效就会返回 true，否则返回 false。

if (document.forms[0].elements[0].checkValidity()){ 
  // 字段有效，继续
} else {
  // 字段无效
}
// 该方法也可以作用于表单上
if(document.forms[0].checkValidity()){ 
  // 表单有效，继续
} else {
  // 表单无效
}

checkValidity() 方法只会告诉我们字段是否有效，而 validity 属性会告诉我们字段为什么有效或无效。这个属性是一个对象，包含一系列返回布尔值的属性。通过 validity 属性可以检查表单字段的有效性，从而获取更具体的信息。

if (input.validity && !input.validity.valid){
  if (input.validity.valueMissing){
    console.log("Please specify a value.")
  } else if (input.validity.typeMismatch){
    console.log("Please enter an email address.");
  } else {
    console.log("Value is invalid.");
  }
}

novalidate 属性可以禁止对表单进行任何验证

<form method="post" action="/signup" novalidate> 
  <!-- 表单元素 -->
</form>